<template>
	<view class="content">
		<view class='title'>
			<u-row>
				<u-col span='8'>
					<view>
						收款账户信息
					</view>
				</u-col>
				<u-col span='4'>
					<view style='float:right'>
						<u-avatar v-if='account.status >= 2'
							src="https://picture.jmgc.vip/4480a85d-50d6-4905-8403-f5718d2f5968.png"></u-avatar>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class='detail'>
			<view class='data'>
				<text style='color:#909399;float:right;font-size:16px;padding-top:5px;' @click='toDeleteHuifuAccount'>
					注销账号
				</text>
				<view class='list'>
					真实姓名：{{maskRealName(account.outAcntNm)}}
				</view>
				<view class='list'>
					身 份 证：{{maskCardNumber(account.licNo)}}
					<text v-if='account && account.status == 0' class='edit'
						@click='toUrl("/pages/wallet/bank")'>修改</text>
				</view>
				<view class='list'>
					手 机 号：{{maskCardNumber(account.mobile)}}
				</view>
			</view>
		</view>
		<view v-if="account" style="padding: 10px;">
			<view>
				<view style='color:#fff;font-size: 16px;padding-left:10px;'>
					提现银行卡
				</view>
				<view v-if='cards && cards.length > 0'>
					<view v-for='card in cards'>
						<view class='bank-card' @click='changeDefaultCard(card)'>
							<view style='padding:10px 0px 0px 5px'>
								<u-row align='top'>
									<u-col span='2'>
										<view style='float:right;padding-right:10px'>
											<u-avatar
												src="https://picture.jmgc.vip/272f2132-1936-4d67-b1f0-1101b5aa732e.png"></u-avatar>
										</view>
									</u-col>
									<u-col span='10'>
										<view>
											<view style='font-size:20px;font-weight: bold;'>{{card.bank_name}}</view>
										</view>
										<view style='padding-top:5px;color: #f1f1f1;font-size:18px'>
											<u-row>
												<u-col span='3'>
													<view>*****</view>
												</u-col>
												<u-col span='3'>
													<view>*****</view>
												</u-col>
												<u-col span='3'>
													<view>*****</view>
												</u-col>
												<u-col span='3'>
													<view>{{card.card_no.substr(card.card_no.length - 4)}}</view>
												</u-col>
											</u-row>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: {
					id: 0,
					outAcntNm: '',
					licNo: '',
					mobile: '',
				},
				cards: [],
				defaultPayment: 'huifu-pay',
				defaultCard: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.request.get(`api/huifu-accounts`).then((res) => {
					console.log('huifu', res.data)
					if (res.data != '') {
						if (res.data[0].indvBaseInfo) {
							this.account = {
								outAcntNm: res.data[0].indvBaseInfo.name,
								licNo: res.data[0].indvBaseInfo.cert_no,
								mobile: res.data[0].indvBaseInfo.mobile_no,
								status: 2,
								id: res.data[0].id
							}
							this.defaultCard = res.data[0].cardInfo
						} else {
							this.account = {
								outAcntNm: res.data[0].entBaseInfo.reg_name,
								licNo: res.data[0].entBaseInfo.license_code,
								mobile: res.data[0].entBaseInfo.contact_mobile_no,
								status: 2,
								id: res.data[0].id
							}
						}

						this.cards = res.data[0].qryCashCardInfoList
					} else {
						uni.showModal({
							title: '',
							content: '请先绑定银行卡',
							showCancel: false,
							success: () => {
								uni.reLaunch({
									url: '/pages/wallet/bank-card'
								})
							}
						})
					}
				})
			},
			toDeleteHuifuAccount() {
				uni.showModal({
					title: '请注意',
					content: '如果有提现中的操作，请勿注销，否则可能会对您造成损失，是否确定注销账号？',
					success: (data) => {
						if (data.confirm) {
							uni.showLoading()
							this.request.delete(`api/huifu-accounts/${this.account.id}`).then((res) => {
								uni.hideLoading()
								uni.showModal({
									title: '',
									content: '注销成功！',
									showCancel: false,
									success: () => {
										uni.reLaunch({
											url: '/pages/wallet/index'
										})
									}
								})
							}).catch((err) => {
								uni.hideLoading()
							})
						}
					}
				})
			},
			maskCardNumber(cardNumber) {
				cardNumber = cardNumber + ' '
				if (cardNumber.length < 8) {
					return cardNumber;
				}
				var maskedNumber = cardNumber.substr(0, 4) + "*".repeat(cardNumber.length - 8) + cardNumber.substr(-4);
				return maskedNumber;
			},
			maskRealName(realname) {
				if (realname.length < 1) {
					return realname;
				}
				var maskedName = realname.substr(0, 1) + "*".repeat(realname.length - 1) + realname.substr(-1);
				return maskedName;
			}
		}
	}
</script>

<style>
	.footer {
		position: fixed;
		bottom: 10px;
		width: 100%;
	}

	.content {
		background-color: #252758;
		min-height: 100vh;
		overflow: auto;
	}

	.detail {
		background-color: #3B3D69;
		color: fff;
		padding: 0px 10px;
	}

	.title {
		padding: 10px 20px;
		color: #fff;
		font-weight: bold;
		font-size: 16px;
	}

	.data {
		padding: 10px;
		color: #606266;
		font-size: 14px;
	}

	.list {
		padding: 5px 0px;
		font-size: 16px;
		color: #fff;
		padding: 10px 0px
	}

	.edit {
		color: #2b85e4;
		float: right;
		padding-right: 10px;
		font-size: 14px;
	}

	.card {
		background-color: white;
		color: #606266;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
	}

	.bank-card {
		background-color: #3E73D3;
		color: #fff;
		margin: 10px 5px 0px 5px;
		padding: 0px 0px 20px 5px;
		border-radius: 10px;
	}

	.card-btn {
		background-color: #f1f1ff;
		border-radius: 0px 0px 10px 10px;
		margin: 0px 5px 20px 5px;
		padding: 10px;
		text-align: center;
	}

	.add-card {
		padding: 30px 10px;
		background-color: #fff;
		color: #303133;
		border-radius: 10px;
		margin: 10px 5px;
	}
</style>